<template>
	<view class="car-type">
		<view class="top">
			<image @click="back" src="https://z3.ax1x.com/2021/04/08/cYSVW4.png" ></image>
			<view class="top-title">
				请选择车型
			</view>
		</view>
		<view class="bottom">
			<view class="bottom-content">
				<view class="brand-logo">
						<image :src="carItemInfo.carbrandImage" class="brand-img"></image>
						<view class="brand-text">
							{{carItemInfo.carbrandName}}
						</view>
				</view>
			</view>
			<view class="bottom-content-type">
					<view class="type-title">请选择车型</view>
					<view class="type-content" v-for="item in carSeriesInfo" :key="item.carinformationId">
						<view class="type-content-item" @click="addMyLoveCar(item)">
							<text>{{item.carinformationName}}</text>
						</view>
					</view>	
			</view>
		</view>
	</view>
</template>

<script>
	import { createNamespacedHelpers } from "vuex"
	let {mapActions,mapState} =createNamespacedHelpers("mineCar")
	export default {
		data() {
			return {
				carItemInfo:{}
			};
		},
		onLoad(option) {
			let res = JSON.parse(uni.getStorageSync('carItem'));
			this.carItemInfo=res;
			this.fetchData(parseInt(option.carseriesId));
		},
		methods:{
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			...mapActions(["getCarSeriesAll","addLoveCarOne"]),
			async fetchData(val){
				await this.getCarSeriesAll(val)
			},
			async addMyLoveCar(val){
				let obj={};
				//车品牌
				obj.mycarBrand=val.carbrandName;
				obj.mycarCode="0";
				obj.mycarEngineCapacity=100;
				obj.mycarImage="https://z3.ax1x.com/2021/04/14/c6gVrq.png";
				obj.mycarKm=100;
				obj.mycarOntheroadTime="0";
				obj.mycarRegisterTime="0";
				//车系
				obj.mycarType=val.carseriesName
				//生产年份
				obj.mycarProductionDate=val.year+"年产"
				//车类型
				obj.cartypeId=val.carinformationId
				obj.userId=1
				let data =await this.addLoveCarOne(obj)
				if(data.code==1334){
					uni.showToast({
						title:"添加爱车成功！",
						duration: 1000,
					})
					// uni.reLaunch({
					// 	url:"../mine"
					// })
					uni.switchTab({
						url:"../mine"
					})
					// uni.navigateBack({
					// 	delta:3
					// })
				}
			}
		},
		computed:{
			...mapState(['carSeriesInfo'])
		}
	}
</script>

<style lang="scss" scoped>
	.car-type{
		.top{
			width: 100vw;
			height: 200rpx;
			box-sizing: border-box;
			background-image: linear-gradient(to right,#FF7C16,#FF5401);
			display: flex;
			align-items: center;
			padding-top: 120rpx;
			box-sizing: border-box;
			image{
				width: 64rpx;
				height: 64rpx;
			}
			.top-title{
				margin-left: 220rpx;
				color: white;
				font-size: 36rpx;
				font-weight: bold;
			}
		}
		.bottom{
			width: 100vw;
			height: 100vh;
			.bottom-content{
				margin-bottom: 20rpx;
				.brand-logo{
					width: 100vw;
					background-color: white;
					display: flex;
					flex-wrap: wrap;
					display: flex;
					align-items: center;
					.brand-img{
						margin-left: 30rpx;
						margin-right: 30rpx;
						width:100rpx;
						height: 100rpx;
					}
				}
			}
			.bottom-content-type{
				.type-title{
					font-size: 32rpx;
					width: 100vw;
					height: 80rpx;
					line-height: 80rpx;
					padding-left: 20rpx;
					box-sizing: border-box;
					background-color: #f9f9f9;
				}
				.type-content{
					width: 100vw;
					height: 100rpx;
					.type-content-item{
						height: 100rpx;
						display: flex;
						align-items: center;
						box-sizing: border-box;
						padding-left: 30rpx;
						border-bottom: 1px solid #f9f9f9;
						// &:nth-of-type(4){
						// 	border-bottom:none ;
						// }
					}
				}
			}
			
		}
	}
</style>
